import { Canvas } from '@react-three/fiber';
import { EffectComposer, Bloom } from '@react-three/postprocessing';
import { DNAModel } from './components/DNAModel';
import { StarField } from './components/StarField';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
import { Suspense } from 'react';
import Home from './pages/Home';
import DNA from './pages/DNA';
import './App.css';

// 定义游戏模块配置
const gameModules = [
  { path: 'dna', name: 'DNA转录翻译', component: DNA },
  // 预留其他游戏模块的位置
  // { path: 'cell-division', name: '细胞分裂', component: CellDivision },
  // { path: 'enzyme', name: '酶促反应', component: EnzymeSimulation },
];

// 首页组件
function HomePage() {
  const navigate = useNavigate();

  return (
    <div className="app">
      <Canvas
        camera={{ position: [0, 0, 1], fov: 75 }}
        style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', background: 'transparent' }}
      >
        <Suspense fallback={<span>加载模型中...</span>}>
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 10, 10]} intensity={1} />
          <StarField />
          <DNAModel />
          <EffectComposer>
            <Bloom
              intensity={1.5}
              luminanceThreshold={0.1}
              luminanceSmoothing={0.9}
            />
          </EffectComposer>
        </Suspense>
      </Canvas>

      <div className="content">
        <div className="text-container" style={{ 
          backgroundColor: 'rgba(0, 0, 0, 0.7)', 
          padding: '2rem', 
          borderRadius: '10px',
          backdropFilter: 'blur(5px)',
          maxWidth: '800px',
          margin: '0 auto'
        }}>
          <h1 style={{ 
            color: 'white', 
            fontSize: '2.5rem',
            marginBottom: '1rem',
            textShadow: 'none',
            background: 'none',
            WebkitBackgroundClip: 'unset',
            WebkitTextFillColor: 'white'
          }}>细胞工厂：生命的微观制造车间</h1>
          <p style={{ 
            color: 'white',
            fontSize: '1.1rem',
            marginBottom: '1.5rem'
          }}>探索 DNA、蛋白质合成与细胞分裂的奥秘！</p>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
          <button
            className="start-button"
            onClick={() => navigate('/home')}
            style={{
              padding: '0.8rem 2rem',
              fontSize: '1rem',
              marginTop: '1rem',
              width: '150px'
            }}
          >
            开始游戏
          </button>
        </div>
      </div>
    </div>
  );
}

// 主应用组件，包含路由
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/*" element={<AppWithNavigation />} />
      </Routes>
    </Router>
  );
}

// 带导航栏的布局组件
function AppWithNavigation() {
  return (
    <div className="app-container">
      <nav className="game-nav">
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li style={{ marginLeft: 'auto' }}>
            游戏模块:
          </li>
          {gameModules.map((module) => (
            <li key={module.path}>
              <Link to={`/game/${module.path}`}>{module.name}</Link>
            </li>
          ))}
        </ul>
      </nav>

      <Routes>
        <Route path="/home" element={<Home />} />
        {gameModules.map((module) => (
          <Route
            key={module.path}
            path={`/game/${module.path}`}
            element={<module.component />}
          />
        ))}
      </Routes>
    </div>
  );
}

export default App; 